<template>
    <!-- 隐藏的扫码输入框 -->
    <input
      ref="scanInput"
      v-model="innerValue"
      :style="scanInputStyle"
      :placeholder="placeholder"
      :disabled="disabled"
      @keydown.enter="handleScanEnter"
      @blur="handleScanBlur"
      @input="handleInput"
    />
  </template>
  
  <script>
  export default {
    name: 'ScanInput',
    model: {
      prop: 'modelValue',
      event: 'update:modelValue'
    },
    props: {
      // 双向绑定值
      modelValue: {
        type: [String, Number],
        default: ''
      },
      // 输入框占位符
      placeholder: {
        type: String,
        default: '请扫码'
      },
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false
      },
      // 自动聚焦延时（解决移动端兼容问题）
      focusDelay: {
        type: Number,
        default: 100
      }
    },
    data() {
      return {
        timer: null,
        innerValue: this.modelValue,
        isOtherFocused: false,  // 其他输入框是否获得焦点
        scanInputStyle: {        // 输入框样式
          position: 'absolute',
          left: '-9999px',
          opacity: 0,
          width: '1px',
          height: '1px'
        }
      }
    },
    watch: {
      modelValue(newVal) {
        this.innerValue = newVal
      }
    },
    mounted() {
      this.initFocus()
    },
    beforeDestroy() {
      this.cancelFocus()
    },
    methods: {
      // 初始化聚焦
      initFocus() {
        if (!this.disabled) {
          this.$nextTick(() => {
            this.$refs.scanInput.focus()
          })
          this.timer = setInterval(() => {
            uni.hideKeyboard()
          }, 500)
        }
      },
  
      // 处理扫码输入
      handleScanEnter() {
        /**
         * 扫码完成事件
         * @event scan
         * @property {string} value - 扫码结果
         */
        this.$emit('scan', this.innerValue)
        this.clearInput()
        this.requestFocus()
      },
  
      // 处理输入事件
      handleInput(e) {
        this.$emit('update:modelValue', e.target.value)
        this.$emit('input', e.target.value)
      },
  
      // 清空输入框
      clearInput() {
        this.innerValue = ''
        this.$emit('update:modelValue', '')
        this.$emit('input', '')
      },
  
      // 请求焦点
      requestFocus() {
        if (this.disabled) return
        this.focusTimer = setTimeout(() => {
          this.$refs.scanInput.focus()
        }, this.focusDelay)
      },
  
      // 取消焦点请求
      cancelFocus() {
        clearTimeout(this.focusTimer)
      },
  
      // 当其他输入框获得焦点时调用
      handleOtherFocus() {
        this.isOtherFocused = true
        clearInterval(this.timer)
        this.timer = null
        this.cancelFocus()
      },
  
      // 当其他输入框失去焦点时调用
      handleOtherBlur() {
        this.isOtherFocused = false
        this.timer = setInterval(() => {
          uni.hideKeyboard()
        }, 500)
        this.requestFocus()
      },
  
      // 处理自身失焦
      handleScanBlur() {
        if (!this.isOtherFocused) {
          this.requestFocus()
        }
      }
    }
  }
  </script>